<script setup lang="ts">
import { STORAGE_MODES } from '@/enum/modules/indicator'

const active = defineModel<STORAGE_MODES>({ required: true })
</script>

<template>
  <div class="time-type-filter flex items-center justify-end">
    <ElButtonGroup>
      <ElButton :type="active === STORAGE_MODES.DAY ? 'primary' : ''" @click="active = STORAGE_MODES.DAY">
        日
      </ElButton>
      <ElButton :type="active === STORAGE_MODES.MONTH ? 'primary' : ''" @click="active = STORAGE_MODES.MONTH">
        月
      </ElButton>
      <ElButton :type="active === STORAGE_MODES.YEAR ? 'primary' : ''" @click="active = STORAGE_MODES.YEAR">
        年
      </ElButton>
    </ElButtonGroup>
  </div>
</template>
